
import styled from '@emotion/styled'
import React from 'react'
import { connect } from 'react-redux'
import {incrementAge, decrementAge,changePerson, asyncIncrementAge} from "../store/actions"


const mapStateToProps = (state) => ({person: state})
const mapDispatchToProps = (dispatch) => {
  return{
    incrementAge: () => dispatch(incrementAge()),
    decrementAge: () => dispatch(decrementAge()),
    changePerson: Person => dispatch(changePerson(Person))
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Person)





 function Person({person,incrementAge, decrementAge, changePerson}) {
  const {name,age} = person
  return (
    <Container>
      <h2>人员信息</h2>
      <h3>姓名:{name}, 年龄:{age}</h3>
      <button onClick={incrementAge}>添加年龄</button>
      <button onClick={decrementAge}>减小年龄</button>
      <button onClick={() => changePerson({name:'周一帆', age: 11})}>换人</button>
    </Container>
  )
}

const Container = styled.div`
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: pink;
`